<template>
  <view class="box">
    <!-- 导航栏部分 -->
    <uv-navbar 
      class="bold-title" 
      title="繁殖管理" 
      @leftClick="leftClick" 
      :safeAreaInsetTop="true" 
      :placeholder="true" 
      :height="'44px'" 
    ></uv-navbar>
    
    <!-- 选项卡导航部分 -->
    <view class="tabs">
      <!-- 发情选项卡 -->
      <view :class="['tab', activeTab === '发情' ? 'active' : '']" @click="switchTab('发情')">
        发情
      </view>
      <!-- 节育选项卡 -->
      <view :class="['tab', activeTab === '节育' ? 'active' : '']" @click="switchTab('节育')">
        节育
      </view>
    </view>
    
    <!-- 内容区域部分 -->
    <view class="content-area">
      <!-- 当激活的选项卡是发情时显示发情相关内容 -->
      <Repheat v-if="activeTab === '发情'"></Repheat>
      <!-- 当激活的选项卡是节育时显示节育相关内容 -->
      <Repcontraception v-if="activeTab === '节育'"></Repcontraception>
    </view>
    
    <!-- 底部按钮部分 -->
    <view class="header">
      <!-- 点击新增按钮执行goToTrace函数 -->
      <button class="add-button" @click="goToTrace">新增</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Repcontraception from '@/pages/manage/reproduce/Repcontraception.vue';
import Repheat from '@/pages/manage/reproduce/Repheat.vue';

// 创建响应式变量activeTab，用于存储当前激活的选项卡，默认值为发情
const activeTab = ref('发情');

// 定义switchTab函数，用于切换选项卡
const switchTab = (tab) => {
  activeTab.value = tab; // 更新当前激活的选项卡
};

// 定义leftClick函数，用于处理导航栏左侧按钮的点击事件，执行返回操作
const leftClick = () => {
  uni.navigateBack();
};

// 定义goToTrace函数，用于处理新增按钮的点击事件
const goToTrace = () => {
  if (activeTab.value === '发情') {
    uni.navigateTo({
      url: './Repheatadd'
    });
  } else {
    uni.navigateTo({
      url: './Repcontraceptionadd'
    });
  }
};
</script>

<style lang="scss" scoped>
/* 样式部分保持不变 */
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.bold-title {
  font-weight: bold;
}

.tabs {
  display: flex;
  background-color: #f3f5f8;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 15rpx 0;
  font-size: 30rpx;
  color: #666;
  position: relative;
}

.tab.active {
  color: #0bcb75;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 40%;
  height: 4rpx;
  background-color: #0bcb75;
}

.content-area {
  flex: 1;
  overflow: auto;
  background-color: #f3f5f8;
}

.header {
  padding: 20rpx 0;
  background-color: #0bcb75;
}

.add-button {
  background-color: #0bcb75;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12rpx;
  width: 100%;
  font-size :28rpx;
  margin-top: 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>